<template>

  <!--  background-image: linear-gradient(to right top, #00c9a7, #7bd6a6, #b2e3af, #ddf0c3, #fefedf);-->

  <!--background-image: linear-gradient(to right, #a3cfcd, #badae2, #d5e5ef, #edf1f8, #ffffff);-->
  <div class="stacked-cards" style="margin: 0 auto">
    <!--   底层卡片-->
    <el-card class="card-top" style="width: 900px;height:700px;"
             shadow="always">
      <el-card style="font-weight: bold;color: gray;text-align: center;width: 150px;background-color: transparent;font-size: 20px;border:0;background-image: linear-gradient(to right bottom, #82e2d9, #6fdae2, #63d0e9, #63c6ed, #6ebaee, #86baef, #9abbef, #acbced, #c5cbf1, #dadcf5, #eeedfa, #ffffff);">考试报名</el-card>
      <!--
              <el-switch
                  v-model="isShow"
                  class="ml-2"
                  inline-prompt
                  style="--el-switch-on-color: gray; --el-switch-off-color: #6fdae2;font-weight: bold;text-align: center;font-size: 16px;"
                  active-text="考试类别"
                  inactive-text="考试类别"
                  width="150"
                  size="large"
              />
              <el-card v-if="isShow" style="border-radius:30px;height: 80px;line-height:70px;width:700px;background-color: rgba(128, 128, 128, 0.1);margin:0 auto;">
                <el-form :inline="true" style="width: 100%;">
                  <el-form-item >
                                 <lable style="color: gray;font-weight:bold;margin-right: 10px;">考试类别</lable>
                    <el-input placeholder="请输入考试类别"
                              style="border-radius:50px;width: 300px;" @keydown.enter="" v-model="searchForm.category"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button @click="resetSearch" style="border-radius: 20px;background-image: linear-gradient(to bottom, #9bcecc, #b5d9e2, #d2e4f0, #ecf0f8, #ffffff);">重置</el-button>
                    <el-button type="primary" style="border-radius: 20px;background-image: linear-gradient(to top, #9bcecc, #b5d9e2, #d2e4f0, #ecf0f8, #ffffff);color: gray;" @click="load">查询</el-button>
                  </el-form-item>
                </el-form>
              </el-card>
         -->
      <el-card style="border-radius:30px;height: 70px;line-height:50px;width:700px;background-color: rgba(128, 128, 128, 0.1);">
        <el-form :inline="true" style="width: 100%;">
          <el-form-item >
            <lable style="color: gray;font-weight:bold;margin-right: 10px;">考试类别</lable>
            <el-input placeholder="请输入考试类别"
                      style="border-radius:50px;width: 300px;" @keydown.enter="" v-model="searchForm.category"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button color="#0089BA" @click="resetSearch" style="border-radius: 20px;">重置</el-button>
            <el-button color="#0089BA" style="border-radius: 20px;color: white;" @click="load">查询</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-card>

    <!--   叠加卡片-->
    <el-card body-style="padding:0px;" class="card-bottom" style="width: 950px; height:500px;position: absolute; top: 195px; left: 30px;border-radius: 5px;">
      <el-row style="position: relative;display: flex; justify-content: space-between;margin: 0px;overflow-y: auto;">
        <el-col :span="18" style="background-color:rgba(128, 128, 128, 0.1);height: 500px;overflow: auto;">
          <!--          style="background-image: radial-gradient(circle, #9fe191, #b0e294, #bfe499, #cce59e, #d8e7a5);-->

          <el-row style="overflow-y: auto;margin-top: 50px;margin-left: 50px;display: flex;flex-wrap: wrap;justify-content: flex-start;" >
            <el-col :span="12" style="margin-bottom: 30px;" v-for="c in certificateArr">
              <el-button class="scale" style="margin-right: 16px;width: 265px;text-align: left;height: 40px;border-radius: 10px;
  border: none;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);font-weight: bold;"  @click="change(c.id)" >{{c.category}}</el-button>
            </el-col>
          </el-row>
          <!--              drawer = true-->

        </el-col>
        <!--   background-image: radial-gradient(circle, #9fe191, #b0e294, #bfe499, #cce59e, #ddeea6);     -->
        <el-col :span="6" style="position: relative;background-color: #D9DAFF;
  border-radius: 0 10px 10px 0;">
          <!--          background-image: linear-gradient(to left, #eef985, #e9f68e, #e5f496, #e1f19e, #ddeea6);-->
          <el-calendar class="el-calendar" style="background-color: transparent;width: 300px;margin-left: 10px;position:absolute;border: #333333;" v-model="value" />
        </el-col>
      </el-row>




      <!--  科目详情页弹窗-->
      <el-drawer v-model="drawer" title="I am the title" :with-header="false">
        <!--          悬浮挂具体科目名称-->

        <el-card style="background-color:lightgray;color: white;font-weight: bold;">全国大学英语四、六级考试(CET)</el-card>


        <el-tabs  style="height: 200px" class="demo-tabs">
          <el-tab-pane label="介绍">
            <el-card >
              <p>全国大学英语四、六级考试（CET）是由教育部主办，教育部教育考试院（原教育部考试中心）主持和实施的大规模标准化考试，是全国性的教学考试，其目的是促进我国大学英语教学工作，对大学生的英语能力进行客观、准确的测量，为提高我国大学英语课程的教学质量提供服务。CET始于1987年，已走过了三十多年的历程，对我国大学英语教学的发展和改革产生了积极的影响。</p>
              <p>CET笔试的考试时间为每年6月和12月；CET口试的考试时间为每年5月和11月，报考口试的考生必须先报考当次相应级别的笔试。</p>
              <p>CET同时设有非英语考试科目，包括：日语四级(CJT4)、日语六级(CJT6)、俄语四级(CRT4)、俄语六级(CRT6)、德语四级(PHD4)、德语六级(PHD6)和法语四级(TFU4)，以上考试科目每年6月开考一次，均为笔试考核，无口试考核。</p>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="论坛">论坛</el-tab-pane>
          <el-tab-pane label="官网">官网</el-tab-pane>
        </el-tabs>


        <!--          返回顶部-->
        <template>
          <el-backtop :right="100" :bottom="100" />
        </template>
      </el-drawer>



      <!--
      Affix固钉
      <template>
  <el-affix :offset="120">
    <el-button type="primary">Offset top 120px</el-button>
  </el-affix>
</template>


<template>
  <div class="affix-container">
    <el-affix target=".affix-container" :offset="80">
      <el-button type="primary">Target container</el-button>
    </el-affix>
  </div>
</template>
<style scoped>
.affix-container {
  text-align: center;
  height: 400px;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
}
</style>




backtop回到顶部
<template>
  Scroll down to see the bottom-right button.
  <el-backtop :right="100" :bottom="100" />
</template>


标签页

      -->
      <div>
        <v-btn class="ma-2" color="orange-darken-2">
          <v-icon icon="mdi-arrow-left" start></v-icon>Back
        </v-btn>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";
import qs from "qs";

const isShow=ref(false);
const value = ref(new Date())

const drawer = ref(false)
const tabPosition = ref('right');

const searchForm = ref({category: ''})

const certificateArr = ref([]);

const resetSearch = () => {
  searchForm.value = {};//清空用户搜索表单数据
  load();
}

const load = () => {
  let data = qs.stringify(searchForm.value);
  console.log('data:' + data);
  axios.get(BASE_URL + '/v1/certificate/select?' + data).then((response) => {
    if (response.data.code == 2000) {
      certificateArr.value = response.data.data;
    } else {
      ElMessage.error(response.data.msg);
    }
  })
  console.log(certificateArr);
}

onMounted(() => {
  load();
})

const subjectDetailArr = ref([]);
const change = (id) => {
  localStorage.setItem('categoryId', id);
  router.push('/exam');
}

const display=ref(false);

const name=ref();



</script>


<style scoped>
.stacked-cards {
  position: relative; /* 容器需要相对定位，以便子元素可以使用绝对定位 */
  width: 1000px; /* 根据需要设置容器宽度 */
  overflow: visible; /* 确保叠加的卡片不会被裁剪 */
  padding: 25px 50px 100px 10px;

  min-height: 100px;
  margin-left: 0px;
}

.card-top {
  /* 这里可以添加更多样式 */
  background-image: linear-gradient(to bottom, #00c9a7, #7bd6a6, #b2e3af, #ddf0c3, #fefedf);

}

.card-bottom {
  z-index: 1; /* 设置更高的z-index以确保它显示在顶部 */
  /* 这里可以添加更多样式，如阴影、边框等，以增强叠加效果 */

}

.el-calendar {
  transform: scale(0.7); /* 缩放到原始大小的80% */
  transform-origin: top left; /* 可选，设置缩放的原点 */
}




.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}

.scale {
  transition: 1s;
}
/*悬停时让元素放大至原来的1.1倍*/
.scale:hover {
  transform: scale(1.1);
}

.demo-image__lazy {
  overflow-y: auto;
  min-height: 100px;
}

.auto-height-card {
  /* 确保没有设置固定的高度或最大高度 */
  /* 如果需要，可以设置最小高度 */
  min-height: 100px; /* 示例：设置最小高度为 100px */

  /* 如果你的内容需要滚动，可以在这里设置 overflow 属性 */
  /* overflow: auto; */

  /* 其他样式... */
}

/* 使用 ::v-deep 或 >>> 来覆盖默认的样式 */
::v-deep .el-switch__label {
  font-size: 16px;
}

::v-deep .el-switch__core {
  height: 30px;
  width: 60px;
}

::v-deep .el-switch__core::before {
  height: 28px;
  line-height: 28px;
}
</style>
